<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="姚德秋">
    <title></title>
    <style>
        *{
            box-sizing: border-box;
        }
    .box{
        width: 200px;
        margin: 10px auto;
        padding: 10px;
        background-color:lightpink;
    }
    ul{
        margin: 0; 
        padding: 0; 
        list-style: none;
        position: relative;
        width: 180px;
        height: 152px;
        overflow: hidden; 
        margin-top: 10px;  
    }
    a{
        color: white;
        text-decoration: none;
        background-color: lightcoral;
        display: block;
        text-align: center;
        position: absolute;
        bottom: 0px;
        width: 180px;
    }
    .header{
        font-size: 25px;
        text-align: center;
    }
    li{
        position: absolute; 
     display: flex; }
    
    </style>
</head>
<body>
    <div class="box">
        <div class="header">专辑推荐</div>
        <ul>   
        <li><img src="1_1.jpg" alt=""><img src="1_2.jpg" alt="">    
        </li>
          <a class="slide-info" href="#">几何为网-极致绚烂</a><a class="slide" href="#">commo/可可尼</a>
        </ul>
        <ul>
        <li><img src="2_1.jpg" alt=""><img src="2_2.jpg" alt="">
        </li>
          <a class="slide-info" href="#">几何为网-极致绚烂</a><a class="slide" href="#">commo/可可尼</a>
        </ul>
        <ul>
        <li><img src="3_1.jpg" alt=""><img src="3_2.jpg" alt="">
        </li>
          <a class="slide-info" href="#">几何为网-极致绚烂</a><a class="slide" href="#">commo/可可尼</a>
        </ul>
    </div>
    <script src="./jquery.js"></script>
</body>
</html>
<script>
    $('li').hover(function(){
        $(this).stop().animate({
            left:-180
        },400);
        $(this).siblings('.slide').stop().slideUp(400);
        $(this).siblings('.slide-info').stop().slideDown(400);   
    },function(){
        $(this).stop().animate({
            left:0
        },400);
        $(this).siblings('.slide').stop().slideDown(400); 
        $(this).siblings('.slide-info').stop().slideUp(400);
    })
</script>